<template>
    <ul>
        <li
            v-for="product in products"
            :key="product.id"
        >
        {{product.title}} - {{product.price}}
        <button @click="addProductToCart(product)" v-show="product.inventory > 0">Add to cart</button>
        </li>
    </ul>
  </template>
  
  <script>
  // 数据管理后 组件 偏UI data() 私有状态收回
  import {mapState,mapActions} from 'vuex'
  export default {
    computed:mapState({
        products:state => state.products.all
    }),
    mounted() {
        // Vue.use(Vuex)
        this.$store.dispatch('products/getAllProducts')
    },
    // methods:mapActions('products',[
    //     'getAllProducts'
    // ]),
    methods:mapActions('cart',[
        'addProductToCart'
    ])
    // data() {
    //     return {
    //         products:[
    //             {
    //                 id:1,
    //                 title:'IPHONE 14',
    //                 price:5999
    //             }
    //         ]
    //     }
    // }
    // 计算属性
    // computed:{
    //     products() {
    //         return [
    //             {
    //                 id:1,
    //                 title:'IPHONE 14',
    //                 price:5999
    //             }
    //         ]
    //     }
    // }
  }
  </script>
  